<template>
  <div class="layout-drawer-seting">
    <el-drawer
      title="角色权限配置"
      v-model="showDrawer"
      direction="rtl"
      destroy-on-close
      size="240px"
      @close="onDrawerClose"
    >
      <el-scrollbar class="layout-drawer-seting-bar">
        <!-- 菜单权限 -->
        <el-divider content-position="left">菜单权限</el-divider>
        <el-checkbox class="check-all">全选</el-checkbox>
        <div class="layout-drawer-seting-bar-flex">
          <el-tree
            :data="routesList"
            show-checkbox
            default-expand-all
            node-key="name"
            ref="tree"
            highlight-current
            :props="state.defaultProps"
          >
            <template #default="{ node }">
              <span class="custom-tree-node">
                <span>{{ $t(node.label) }}</span>
              </span>
            </template>
          </el-tree>
        </div>

        <!-- 按钮权限 -->
        <el-divider content-position="left">按钮权限</el-divider>
        <el-checkbox class="check-all">全选</el-checkbox>
        <el-checkbox-group v-model="state.checkedBtnAuths">
          <el-checkbox
            v-for="btnAuth in state.btnAuths"
            :label="btnAuth.value"
            :key="btnAuth.key"
          >{{ btnAuth.value }}</el-checkbox
          >
        </el-checkbox-group>
      </el-scrollbar>
      <div class="layout-drawer-seting-bar-bottom">
        <el-button type="primary" size="small" @click="onDrawerClose">保存</el-button>
        <el-button type="danger" size="small" @click="onDrawerClose">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/store';
import { computed, reactive, ref} from 'vue';
const showDrawer = ref(false);
const store = useStore();
// 获取 vuex 中的路由
const formateRoutesList = (roles: any) => {
	return roles.reduce((acc: any, item: any) => {
		const {
			name,
			meta: { title },
			children,
		} = item;
		return children
			? acc.concat({ name, title, children: formateRoutesList(children) })
			: acc.concat({ name, title });
	}, []);
};

const routesList = computed(() => {
	return formateRoutesList(store.state.routesList.routesList);
});

const state = reactive({
	defaultProps: {
		children: 'children',
		label: 'title',
	},
	btnAuths: [
		{ key: 'btn.add', value: '新增' },
		{ key: 'btn.del', value: '删除' },
		{ key: 'btn.edit', value: '编辑' },
		{ key: 'btn.link', value: '跳转' },
	],
	checkedBtnAuths: [],
});
const openDrawer = () => {
	showDrawer.value = true;
};
defineExpose({ openDrawer });
const onDrawerClose = () => {
	showDrawer.value = false;
};
</script>

<style scoped lang="scss">
.layout-drawer-seting-bar {
	height: calc(100vh - 100px - var(--el-drawer-padding-primary));
	padding: 0 15px;
	::v-deep(.el-scrollbar__view) {
		overflow-x: hidden !important;
	}
	.check-all {
		margin-bottom: 10px;
	}
	&-bottom {
		padding-top: var(--el-drawer-padding-primary);
		height: 50px;
		width: 100%;
		border-top: 1px solid #e6e6e6;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}
</style>
